<template>
  <transition name="vbestui-notice">
    <div class="vbestui-notice" v-if="isShow" @mouseenter="handleEnter" @mouseleave="handleLeave">
      <div class="vbestui-notice-left" :class="[`vbestui-notice-left-bac-${type}`]"></div>
      <div class="vbestui-notice-container">
        <div class="vbestui-notice-icon" v-show="icon">
          <i
            class="vbestui-notice-icon-size"
            :class="[`vbestui-iconfont icon-${type}-m `,
                `vbestui-notice-icon-${type}`]"
          ></i>
        </div>
        <div class="vbestui-notice-close" @click="noticeClose">
          <b-button class="vbestui-iconfont icon-x" type="text" width="20px" height="20px" />
        </div>

        <div
          class="vbestui-notice-container-content"
          :class="{'vbestui-notice-container-content-ispadding':!icon}"
        >
          <div class="vbestui-notice-article-title">{{title}}</div>
          <div class="vbestui-notice-article-p">{{desc}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-notice";
export default {
  name: "Notice",
  data() {
    return {
      prefixCls: prefixCls,
      isShow: false,
      icon: false,
      duration: 4,
      type: "default",
      title: "",
      desc: "",
      timer: null,
    };
  },
  methods: {
    open(option) {
      clearTimeout(this.timer);
      this.setData(option);
      this.toggle();
    },
    info(option) {
      clearTimeout(this.timer);
      let type = "info";
      const obj = this.setTypeData(type, option);
      this.setData(obj);
      this.toggle();
    },
    success(option) {
      clearTimeout(this.timer);
      let type = "success";
      const obj = this.setTypeData(type, option);
      this.setData(obj);
      this.toggle();
    },
    warning(option) {
      clearTimeout(this.timer);
      let type = "warning";
      const obj = this.setTypeData(type, option);
      this.setData(obj);
      this.toggle();
    },
    error(option) {
      clearTimeout(this.timer);
      let type = "error";
      const obj = this.setTypeData(type, option);
      this.setData(obj);
      this.toggle();
    },
    noticeClose(callback) {
      this.isShow = false;
      if (callback instanceof Function) {
        callback();
      }
    },
    /**info、success、warning、error等设置data */
    setTypeData(type, option) {
      const { title, desc, duration } = option;
      const obj = {
        type,
        title,
        desc,
        duration,
        icon: true,
      };
      return obj;
    },
    setData(option) {
      this.isShow = false;
      this.icon = false;
      (this.duration = 4), (this.type = "default");
      this.title = "";
      this.desc = "";
      let { icon, duration, type, title, desc } = option;
      if (typeof icon == "boolean") {
        this.icon = icon;
      }
      if (typeof duration == "string" || typeof duration == "number") {
        this.duration = duration * 1;
      }
      if (
        typeof type == "string" &&
        oneOf(type, ["success", "info", "warning", "error"])
      ) {
        this.type = type;
      }
      if (typeof title == "string") {
        this.title = title;
      }
      if (typeof desc == "string") {
        this.desc = desc;
      }
    },
    /**鼠标进入清除timeout */
    handleEnter() {
      clearTimeout(this.timer);
    },
    /**鼠标离开开启timeout */
    handleLeave() {
      this.startTimeout();
    },
    toggle() {
      this.isShow = true;
      this.startTimeout();
    },
    startTimeout() {
      this.timer = setTimeout(() => {
        this.isShow = false;
      }, this.duration * 1000);
    },
  },
};
</script>